<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layout 管理界面大布局示例 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.3/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="./首页.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100vh;
            /* 弹性盒子模型 */
            display: flex;
            /* 限免两个属性是让body里的子类居中 */
            justify-content: center;
            align-items: center;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 350px;
            height: 450px;
            border-radius: 20px;
            background-color: #4471a3;
            /* 盒子阴影 */
            box-shadow: 15px 15px 10px rgba(33, 45, 58, 0.3);
            overflow: hidden;
            position: relative;
        }

        .container form {
            width: 350px;
            height: 200px;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: center;
            z-index: 1;
        }

        .container form .tbx {
            width: 250px;
            height: 40px;
            outline: none;
            border: none;
            border-bottom: 1px solid #fff;
            background: none;
            color: #fff;
            font-size: 15px;
        }

        /* 设置文本框提示文本的样式 */
        .container form .tbx::placeholder {
            color: #fff;
            font-size: 15px;
        }

        .container form .sub {
            width: 250px;
            height: 40px;
            outline: none;
            border: 1px solid #fff;
            border-radius: 20px;
            letter-spacing: 5px;
            color: #fff;
            background: none;
            cursor: pointer;
            margin-top: 20px;
        }

        .container h1 {
            color: #ecf0f1;
            font-size: 50px;
            letter-spacing: 5px;
            font-weight: 100;
            /* 文字阴影 */
            text-shadow: 5px 5px 5px rgba(33, 45, 58, 0.3);
            z-index: 1;
        }

        /* 设置鼠标进入的样式 */
        .container .in {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: #cf455f;
            transform: translate(-50%, -50%);
            /* 使用in动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
            animation: in 0.5s ease-out forwards;
        }

        /* 设置鼠标离开的样式 */
        .container .out {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 1200px;
            height: 1200px;
            border-radius: 50%;
            background: #cf455f;
            transform: translate(-50%, -50%);
            /* 使用out动画，持续0.5秒，缓出的时间函数，停留在最后一帧 */
            animation: out 0.5s ease-out forwards;
        }

        /* 动画 */
        /* 设置鼠标进入时，元素的动画 */
        @keyframes in {

            /* 初始关键帧 */
            0% {
                width: 0;
                height: 0;
            }

            /* 结束关键帧 */
            100% {
                width: 1200px;
                height: 1200px;
            }
        }

        /* 设置鼠标离开时，元素的动画 */
        @keyframes out {

            /* 初始关键帧 */
            0% {
                width: 1200px;
                height: 1200px;
            }

            /* 结束关键帧 */
            100% {
                width: 0;
                height: 0;
            }
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" class="add">添加</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;" class="find_master">查找</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 11</a></dd>
                        <dd><a href="javascript:;">menu 22</a></dd>
                        <dd><a href="javascript:;">menu 33</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                    <a href="javascript:;" class="user_unter">
                    </a>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="enter" href="javascript:;">表格</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">数据图</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" class="Echarts">柱形图</a></dd>
                            <dd><a href="javascript:;" class="echarts_second">扇形图</a></dd>
                            <dd><a href="javascript:;" class="echarts_third">折线图</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;">你好</a></li>
                    <li class="layui-nav-item"><a href="javascript:;">the links</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">
                    Layui 框体布局内容主体区域
                </blockquote>
                <div class="layui-card layui-panel">
                    <div id="main" style="width: 600px;height:400px;border: 1px solid #ccc;"></div>
                </div>
            </div>
        </div>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <script src="//unpkg.com/layui@2.10.3/dist/layui.js"></script>
    <script>
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                menuLeft: function (othis) { // 左侧菜单事件
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                },
                menuRight: function () {  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                }
            });
        });
    </script>
    <!-- //JQuery引入 -->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        //返回首页
        $(".enter").on("click", () => {
            location.assign("/首页/首页.html")
        })
    </script>
    <!-- //引入图标 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        $.ajax({
            type: "GET",
            url: "https://liu.zzgoodqc.cn/goodsx/goodslist",
            dataType: "json",
            success: (a) => {
                var arr1 = []
                var arr2 = []
                a.data.forEach(item => {
                    arr1.push(item.goods_name)
                    arr2.push(item.sold)
                });
                var option = {
                    xAxis: {
                        type: 'category',
                        data: arr1
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            type: "line",
                            data: arr2
                        }
                    ]
                };
                // 使⽤刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: (e) => {
                console.log(e);
            }
        })
    </script>
      <script>
        //折线跳
        $(".echarts_third").on("click", () => {
            location.assign("./折线.html")
        })
    </script>
    <script>
        //扇形图
        $(".echarts_second").on("click", () => {
            location.assign("./扇形图.html")
        })
    </script>
    <script>
        //图标跳转
        $(".Echarts").on("click", () => {
            location.assign("./柱形图.html")
        })
    </script>
</body>

</html>